<template>
    <div class="register-container">
      <div class="register-card">
        <h2>创建新账号</h2>
        <form @submit.prevent="handleRegister">
          <div class="form-group">
            <label for="username">用户名</label>
            <input 
              type="text" 
              id="username" 
              v-model="user.username" 
              placeholder="请输入用户名" 
              required
            >
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input 
              type="password" 
              id="password" 
              v-model="user.pwd" 
              placeholder="请输入密码" 
              required
            >
          </div>
          <div class="form-group">
            <label for="realName">真实姓名</label>
            <input 
              type="text" 
              id="realName" 
              v-model="user.realName" 
              placeholder="请输入真实姓名" 
              required
            >
          </div>
          <div class="form-group">
            <label for="age">年龄</label>
            <input 
              type="number" 
              id="age" 
              v-model="user.age" 
              placeholder="请输入年龄" 
              required
            >
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input 
              type="email" 
              id="email" 
              v-model="user.email" 
              placeholder="请输入邮箱" 
              required
            >
          </div>
          <div class="form-group">
            <label for="stuNum">学号</label>
            <input 
              type="text" 
              id="stuNum" 
              v-model="user.stuNum" 
              placeholder="请输入学号" 
              required
            >
          </div>
          <div class="form-group">
            <label for="className">班级</label>
            <div class="custom-select-container">
              <select 
                id="className" 
                v-model="user.className"
                class="custom-select"
              >
                <option :value="1">23软件技术1班</option>
                <option :value="2">23软件技术2班</option>
              </select>
              <div class="select-arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 11L3 6h10z"/>
                </svg>
              </div>
            </div>
          </div>
          <button type="submit" class="btn-register" :disabled="loading">
            <Spinner v-if="loading" />
            <span v-else>注册</span>
          </button>
          <p class="login-link">
            已有账号？<router-link to="/login">立即登录</router-link>
          </p>
        </form>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { registerUser } from '../api'
  import Spinner from '../components/Spinner.vue'
  
  const router = useRouter()
  const loading = ref(false)
  const user = ref({
    username: '陈锦漪',
    pwd: '123456',
    realName: '陈锦漪',
    age: 20,
    email: '3513777189@qq.com',
    stuNum: '23002973',
    className: 1
  })
  
  const handleRegister = async () => {
    try {
      loading.value = true
      const response = await registerUser(user.value)
      
      if (response.data.success) {
        router.push({ name: 'login' })
      } else {
        alert('注册失败: ' + (response.data.message || '请检查输入信息'))
      }
    } catch (error) {
      alert('注册失败，请稍后再试')
      console.error('Registration error:', error)
    } finally {
      loading.value = false
    }
  }
  </script>
  
  <style scoped lang="scss">
  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    padding: 20px;
  }
  
  .register-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 40px;
    width: 100%;
    max-width: 500px;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.5s ease-in-out;
    overflow-y: auto;
    max-height: 90vh;
  }
  
  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 28px;
  }
  
  .form-group {
    margin-bottom: 20px;
    position: relative;
  }
  
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
  }
  
  .form-group input, 
  .custom-select {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
    background-color: white;
    font-family: inherit;
  
    &:focus {
      border-color: #3498db;
      outline: none;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }
  }
  
  /* 自定义下拉框容器 */
  .custom-select-container {
    position: relative;
    display: block;
  }
  
  /* 自定义下拉框 */
  .custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 40px;
  }
  
  /* 下拉箭头 */
  .select-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #555;
    width: 16px;
    height: 16px;
  }
  
  .btn-register {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, #27ae60, #219653);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    &:disabled {
      background: #bdc3c7;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
  }
  
  .login-link {
    text-align: center;
    margin-top: 20px;
    color: #555;
    
    a {
      color: #3498db;
      text-decoration: none;
      font-weight: 500;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @media (max-width: 576px) {
    .register-card {
      padding: 25px;
    }
    
    .form-group input, 
    .custom-select {
      padding: 12px;
      font-size: 15px;
    }
    
    .select-arrow {
      right: 12px;
    }
  }
  </style>